<template>
	<view class="files">
		<view class="f jc-c mt-40 w-f">
			<view class="w-160 h-160 head-box" @click="show=true">
				<image src="https://cwht.ricecs.cn/app/login/ava.png" class="w-160 h-160 headImg" v-show="!model.avatar">
				</image>
				<image :src="model.avatar" class="w-160 h-160 headImg" v-show="model.avatar"></image>
				<image src="https://cwht.ricecs.cn/app/login/edit.png" class="w-44 h-44 edit"></image>
			</view>
		</view>
		<view class="hang" @click="navTo">
			<view>修改密码</view>
			<u-icon name="arrow-right"></u-icon>
		</view>
		<view class="w-f h-136 f ph-40 bot-box pv-20 jc-s-b ai-c">
			<u-button text="确定" color="#FABB3C" shape="circle" @click="submit"></u-button>
		</view>
    <qf-image-cropper :width="500" :height="500" :radius="30" @crop="handleCrop" v-if="show" @close="show=false"></qf-image-cropper>
	</view>
</template>
<script setup lang="ts">

	import { doctorDetail, doctoredit } from '@/services/api/index';
	import { ref, getCurrentInstance, watch } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { getUploadUrl } from '@/utils/env';

	import { throttle } from '@/utils/global';
	const { proxy } = getCurrentInstance();

	const showBirthday = ref(false);
	const show=ref(false)
	const typeList = ref<any[]>([]);
	const breedList = ref<any[]>([]);

	const model = ref<any>({
		id: null,
		avatar: null,
		name: null,
		firstCategoryId: null,
		secondCategoryId: null,
		gender: null,
		birthday: null,
		sterilization: null,
	});
	const firstCategoryName = ref('');
	const secondCategoryCodeName = ref('');
	const genderName = ref('');
	const birthday = ref('');
	const sterilizationName = ref('');
	const type = ref(''); //新用户
	const rules = {
		name: [
			{
				required: true,
				message: '不能为空',
				trigger: ['blur', 'change'],
			},
		]

	};
	onLoad(() => {
		getDetail();
	});
	watch(
		firstCategoryName,
		() => {
			// getBreed();
		},
		{ immediate: true }
	);
	function handleCrop(e) {
			uploadFiles(e.tempFilePath);
	}
	//获取详情
	async function getDetail() {
		const { data } = await doctorDetail();
		model.value = data

	}
	function navTo(){
		uni.navigateTo({
			url:'/pages_login/forget'
		})
	}
	//提交
	const submit = throttle(() => {
		submitData();
	}, 1000);
	async function submitData() {
		if (!model.value.avatar) {
			uni.showToast({
				title: '请上传头像',
				icon: 'none',
			});
			return;
		}
		await doctoredit(model.value);
		uni.showToast({
			title: '修改成功',
			icon: 'none',
		});
		setTimeout(() => {
			uni.navigateBack()
		}, 500)
	}

	//获取品种
	async function getBreed() {
		const { data } = await categorySimpleQuery({ parentId: model.value.firstCategoryId });
		breedList.value = data;
	}
	//获取类型
	async function getCategory() {
		const { data } = await categorySimpleQuery({ parentId: 0 });
		typeList.value = data;
	}
	//上传
	function upload() {
		uni.chooseImage({
			count: 1, //默认9
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ['album'], //从相册选择
			success: function (res : any) {
				uploadFiles(res.tempFilePaths[0]);
			},
		});
	}
	function uploadFiles(url : string) {
		uni.uploadFile({
			url: getUploadUrl(),
			filePath: url,
			name: 'file',
			formData: {},
			success: (res : any) => {
				console.log(res);
				let data = JSON.parse(res.data);
				model.value.avatar = data.data;
				show.value=false
			},
		});
	}
	// function toNext() {
	//     uni.navigateTo({
	//         url: '/pages_login/wantToRaise',
	//     });
	// }
	//重置
	function reset() {
		model.value = {
			id: null,
			avatar: null,
			name: null,
			firstCategoryId: null,
			secondCategoryId: null,
			gender: null,
			birthday: null,
			sterilization: null,
		};
		firstCategoryName.value = '';
		genderName.value = '';
		birthday.value = '';
		sterilizationName.value = '';
		sterilizationName.value = '';
		secondCategoryCodeName.value = '';
	}
</script>
<style lang="scss" scoped>
	page {
		background: #f5f5f5;
	}
	.hang{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 0;
		margin: 0 40rpx;
		border-bottom: 1px solid #ccc;
	}
	.files {
		width: 100%;
		min-height: 100vh;


		.bot-box {
			background: #fff;
			position: fixed;
			left: 0;
			bottom: 0;

			::v-deep .u-button {
				height: 96rpx !important;
			}
		}

		.form {
			background: #fff;
		}

		.head-box {
			position: relative;

			.edit {
				position: absolute;
				right: 0;
				bottom: 0;
			}

			.headImg {
				border-radius: 50%;
			}
		}

		::v-deep .u-form-item__body {
			padding: 32rpx 0 !important;
		}
	}
</style>
